<template>
  <Detail-dialog
    modal
    :top="2"
    :closeOnClickModal="false"
    :width="75"
    :title="title"
    :show.sync="dialogShow" @close="close" @save="save('cdataForm')">
    <div style="max-height:350px;overflow:auto;">
    <el-form  ref="cdataForm" :model="companyInfo" label-width="100px" :rules="rules">
      <el-form-item label="公司logo" prop="avatar">
          <div class="logo_box">
            <el-avatar
              :size="60"
              :src="companyInfo.logo"
            >
            </el-avatar>
            <div class="change-avatar" @click="handleChangeAvatar">
              更换logo
            </div>
          </div>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="公司名称" prop="companyName">
                <el-input class="wp-form-280" clearable v-model="companyInfo.companyName" placeholder="公司名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司电话" prop="telphone">
                <el-input class="wp-form-280" clearable v-model="companyInfo.telphone" placeholder="公司电话"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="传真" prop="fax">
                <el-input class="wp-form-280" clearable v-model="companyInfo.fax" placeholder="传真"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
                <el-input class="wp-form-280" clearable v-model="companyInfo.email" placeholder="邮箱"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="公司税号" prop="taxNumber">
                <el-input class="wp-form-280" clearable v-model="companyInfo.taxNumber" placeholder="公司税号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法定代表人" prop="legalName">
                <el-input class="wp-form-280" clearable v-model="companyInfo.legalName" placeholder="法定代表人"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开户银行号" prop="depositBankNo">
                <el-input class="wp-form-280" clearable v-model="companyInfo.depositBankNo" placeholder="开户银行号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户银行" prop="depositBank">
                <el-input class="wp-form-280" clearable v-model="companyInfo.depositBank" placeholder="开户银行"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="微信公众号" prop="wechatId">
                <el-input class="wp-form-280" clearable v-model="companyInfo.wechatId" placeholder="微信公众号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司网址" prop="website">
                <el-input class="wp-form-280" clearable v-model="companyInfo.website" placeholder="公司网址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="公司地址" prop="address">
                <el-input  class="wp-form-280" clearable v-model="companyInfo.address" placeholder="公司地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="实名状态" prop="isRealAuth">
            <el-select style="width:280px" disabled v-model="companyInfo.isRealAuth" placeholder="是否实名">
              <el-option  :value="0" label="未实名"></el-option>
              <el-option  :value="1" label="已实名"></el-option>
            </el-select>
             </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="公司注册名称" prop="realName">
                <el-input disabled class="wp-form-280" clearable v-model="companyInfo.realName" placeholder="公司注册名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电子合同账号" prop="orgId">
                <el-input disabled class="wp-form-280" clearable v-model="companyInfo.orgId" placeholder="电子合同账号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
    </el-form>
    </div>
        <input
      id="inputFile"
      type="file"
      accept="image/png, image/jpeg, image/gif, image/jpg"
      style="display: none"
      @change="uploadFile"
    />
    <edit-image
      v-if="showEditImage"
      :show="showEditImage"
      :file="editFile"
      :image="editImage"
      :fixed="false"
      title="修改公司logo"
      @save="submitImage"
      @close="showEditImage = false"
    />
    <el-alert v-if="!isCreate" :closable="false" title="如果开通了电子合同，公司信息请谨慎修改" type="warning"></el-alert>
  </Detail-dialog>
</template>

<script>
import DetailDialog from '@/components/DetailDialog'
import EditImage from '@/components/EditImage'
import system from '@/api/system'
export default {
  components: {DetailDialog, EditImage},
  props: {
    isCreate: {type: Boolean, default: true},
    visible: Boolean,
    title: String,
    data: Object
  },
  watch: {
    visible: {
      handler (val) {
        this.dialogShow = val
      },
      immediate: true
    },
    data: {
      handler (val) {
        this.companyInfo = val || {}
      },
      deep: true,
      immediate: true
    },
    dialogShow (val) {
      this.$emit('update:visible', val)
    }
  },
  data () {
    return {
      dialogShow: false,
      showEditImage: false,
      editFile: null,
      editImage: null,
      companyInfo: {},
      rules: {
        companyName: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    close () {
      this.dialogShow = false
    },
    handleChangeAvatar () {
      document.getElementById('inputFile').click()
    },
    uploadFile (event) {
      const files = event.target.files
      const file = files[0]
      const reader = new FileReader()
      const self = this
      reader.onload = function (e) {
        let result
        if (typeof e.target.result === 'object') {
          // 把Array Buffer转化为blob 如果是base64不需要
          result = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          result = e.target.result
        }
        self.editImage = result
        self.editFile = file
        self.showEditImage = true
        e.target.value = ''
      }
      reader.readAsDataURL(file)
    },
    submitImage (data) {
      this.loading = true
      const param = new FormData()
      this.companyInfo.logo = data.image
      // param.append('userId', this.userInfo.employeeId)
      param.append('file', data.blob, data.file.name)
      system.uploadFileAPI(param)
        .then((res) => {
          this.loading = false
          this.companyInfo.logo = res.data.url
          this.$emit('change')
        })
        .catch(() => {
          this.loading = false
        })
    },
    save (form) {
      this.$refs[form].validate(validate => {
        if (validate) {
          if (!this.isCreate) {
            delete this.companyInfo.realName
            delete this.companyInfo.orgId
            delete this.companyInfo.isRealAuth
            system.updateCompanyInfoAPI(this.companyInfo).then(res => {
              this.close()
              this.$emit('afterSave', res)
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.logo_box {
  display: flex;
  flex-direction: row;
  align-items: center;
  .el-avatar {
    margin-right: 50px;
  }
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 60px;
}
.change-avatar {
  font-size: 12px;
  line-height: 1;
  color: #409eff;
  border: 1px solid #409eff;
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
  &:hover {
    background: #409eff;
    color: #fff;
  }
}
</style>
